<template>
    <div class="jx-content" style="margin-top:0px">
        <div style="padding-top:50px;"></div>
        <!-- 专科版本添加视频 -->
        <div class="video-empty" v-if="!versionVideo"  >
            <div class="uploadBtns">
                <p><img src="../../../assets/images/upImg.png"/></p>
                <p class="uploadBtns-file">点击上传视频</p>
                <input id="version-files" type="file" @change="putFile">
                <p class="uploadBtns-file">提示：支持Mp4视频上传</p>
            </div>
        </div>
        <div class="video-img" v-else >
            <div class="iconpost" >
                <p class="filename">{{versionVideo}}</p>
                <div class="iconfontlist">
                    <i class=" iconfont icon-bofang1" title="播放视频" @click="playvideo"></i>
                    <i class=" iconfont icon-Group-" @click="deleteVideo" title="删除视频"></i>
                    <i class=" iconfont icon-shangchuan"><input id="versionFile" type="file" title="上传视频" @change="putFile"></i>
                    <i class=" iconfont icon-xiazai" v-if=" versionVideo !='' && flagDownVideo" title="下载视频" @click="downFiles" ></i>
                    <i class=" iconfont icon-xiazai xiaz2" v-if="versionVideo =='' ||  !flagDownVideo"  ></i>
                </div>
            </div>
        </div>
        <div class=" video-img-load">
            上传中<i class="el-icon-loading"></i>
        </div>
        <!-- 视频展示 -->
         <el-dialog :close-on-click-modal="false" title="视频"  :visible.sync="dialogPreviews" width="40%"  class="preview"  @close='closeVideoDialog'>
            <!-- <video id="video"   controls disablePictureInPicture  controlslist="nodownload" class="videoShow" :src="videoUrl" ></video> -->
            <video id="video"    class="video-js vjs-default-skin vjs-big-play-centered" controls  preload="auto" data-setup='{}' width="100%" height="346"  style="object-fit:fill" >
                <source  :src="videoUrl" >
            </video>
        </el-dialog>
        <!-- 下面是原来的 -->
        <div v-if="src =='' || show" >
            <div class="fr">
                <button class="saveBtn" @click="look" v-if="versionFile !=''" ><i class="el-icon-search"></i>预览</button>
            </div>
           <div class="fileUp">
                <div>
                    <div v-if="versionFile!=''"  class="down-up">
                        <span style='margin-top:10px;' >{{versionFile}}</span>
                        <i class="iconfont icon-shanchu" @click="deleteFn"></i>
                        <i class="iconfont icon-tubiaozhizuo-"  v-if="versionFile !='' && flagDown"  @click="downloadFile"></i>
                        <i class="iconfont icon-tubiaozhizuo- zhizuo2"  v-if="versionFile =='' || !flagDown" ></i>
                    </div>
                     <el-button  type="primary" class=" uploadBtn"><i class="iconfont icon-shangchuan-"></i>点击上传课件<input id="version-file-input" type="file" @change="getFile" title="文件上传"></el-button>
                     <!-- <el-button  type="primary" class=" uploadBtn" v-if="roles == 'INTERNET_ADMIN'"><i class="iconfont icon-shangchuan-"></i>多文件上传<input id="version-file-input-more" type="file" multiple="multiple" @change="getFileMore" title="文件上传" ></el-button> -->
                     <el-button  type="primary" class=" uploadBtn"><i class="iconfont icon-shangchuan-"></i>多文件上传<input id="version-file-input-more" type="file" multiple="multiple" @change="getFileMore" title="文件上传" ></el-button>
                     <p class="tips">提示：1. 支持PPTX或PDF格式文件上传。</br>
                                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                    2. 系统在处理PPT的过程中会对图片质量有所损耗。
                    </p>
                </div>
           </div>
        </div>
        <div v-if=" src !='' && !show ">
           <div class="fr">
                 <button class="repeatBtn" @click="repeatFn"  v-if=" src !='' "><i class="iconfont icon-icon_edit"></i>修改</button>
           </div>
           <div class="iframse">
                <iframe width="101%"  :height="hei"  style='pverflow:hidden' allowfullscreen="true"  scrolling="no" allowtransparency="true" class="coursewareBox"  :src="'../../../../static/generic/web/viewer.html?file=/tes/course/'+courseId+/chapter/+chapterId+'/resource/read'"  frameborder="0"></iframe>
           </div>
        </div>
    </div>
</template>

<script>
    import videojs from 'video.js'   //视频
    export default {
        data() {
            return {
                //文件名字
                versionFile:'',
                //假定的宽度和高度
                wid:0,
                hei:0,
                //是否展示
                show:'',
                //课程id
                courseId:'',
                //章节id
                chapterId:'',
                //url地址
                src:'',
                //是否允许下载
                flagDown:'',
                //下载文件
                down:'',
                //后台下载标识
                remark:'',
                //存储token值下载
                token:'',
                //角色
                roles:'',

                //视频
                versionVideo:'',
                //是否允许下载
                flagDownVideo:'',
                 //下载文件
                downVodeo:'',
                 //后台下载标识
                remarkVideo:'',
                //存储tokenVideo值视频两次下载
                 tokenVideo:'',
                 //视频Url
                 videoUrl:'',
                 //视频展示
                 dialogPreviews:false,

                 myVideo:'',

            }
        },
        created() {
            // 从状态管理获取roles
            this.roles = this.$store.state.user.roles[0];
            let screenHeight = document.documentElement.clientHeight;
            this.chapterId = this.$localstorage.getLocalStorage('chapterInfoData').chapterId
            this.courseId = this.$localstorage.getLocalStorage('setCourseId')
            this.hei = screenHeight-300;
            this.init()
            this.videoInit()
        },
          destroyed(){
            if(this.myVideo){

                this.myVideo.dispose()
            }

        },
        methods:{


            init(){
                let self = this
                self.$http.get('/tes/course/'+ self.courseId+'/chapter/'+self.chapterId+'/make/resource?types=2').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                         if(res.data.courseware.displayVersion.length>0){
                                self.flagDown = res.data.courseware.displayVersion[0].download
                                self.src = res.data.courseware.displayVersion[0].filePath
                                self.versionFile = res.data.courseware.creativeVersion[0].fileName
                                self.down = res.data.courseware.creativeVersion[0].filePath
                                self.remark = res.data.courseware.creativeVersion[0].remark

                            }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //专科版本
            //视频的初始化
            videoInit(){
                let self = this
                self.$http.get('/tes/course/'+ self.courseId+'/chapter/'+self.chapterId+'/make/resource?types=1').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                         if(res.data.theoryVideo.creativeVersion.length>0){
                            self.flagDownVideo = res.data.theoryVideo.creativeVersion[0].download
                            self.versionVideo = res.data.theoryVideo.creativeVersion[0].fileName
                            self.downVodeo = res.data.theoryVideo.creativeVersion[0].filePath
                            self.remarkVideo = res.data.theoryVideo.creativeVersion[0].remark
                            self.videoUrl = res.data.theoryVideo.displayVersion[0].filePath
                            //self.videoUrl = 'https://www.runoob.com/try/demo_source/movie.mp4'
                         }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
             //关闭视频
            closeVideoDialog(){
               this.$nextTick(()=>{
                    // var myVideo = videojs('video')
                    // myVideo.pause();
                    this.myVideo.pause()
                 })
            },
            //视频上传
            putFile($event){
                let self = this;
                let fileType = $event.target.files[0].name
                fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length) //取得后缀名
                if(fileType.toLowerCase() != 'mp4'){
                    self.$message.error('请上传mp4文件')
                    return
                }
                $('.video-img-load').show()
                $('.video-empty ').hide()
                $('.video-img').hide()

                 let formData = new FormData();
                 formData.append('files', $event.target.files[0]);
                 self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource-file?name=理论课学习视频&resourceType=1', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        self.videoInit()
                       // loading.close()
                        //self.versionVideo = $event.target.files[0].name
                        $event.target.value=''
                        //self.show = false
                        $('.video-img-load').hide()
                        $('.video-empty ').show()
                        $('.video-img').show()
                    }else{
                        //loading.close()
                        $event.target.value=''
                        self.$message.error(res.message)
                        this.flag = false
                    }
                 })
            },
            //下载视频
            downFiles(){
                let self = this
                if(self.versionVideo!='' && self.flagDownVideo){
                    self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource/file-download/permission',{
                        remark :self.remarkVideo,
                        fileName : self.versionVideo
                     }) .then((response) => {
                     let res = response.data
                    if(res.code == '200'){
                        self.tokenVideo = res.data
                        let downloadElement = document.createElement('a');
                        downloadElement.style.display = 'none';
                        downloadElement.href = '/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource/file-download?token='+ self.tokenVideo
                        downloadElement.download = self.versionVideo; //下载后文件名
                        downloadElement.click(); //点击下载
                        //document.body.removeChild(downloadElement); //下载完成移除元素
                    }else{
                        self.$message.error(res.message)
                    }
                   })
                }
            },
            //视频播放
            playvideo(){
                let self= this
                this.dialogPreviews = true
                 this.$nextTick(()=>{

                      self.myVideo = videojs('video', {
                        bigPlayButton: true,
                        textTrackDisplay: false,
                        posterImage: false,
                        errorDisplay: false,
                        controls :true,
                        height: 400,
                        width: 400,
                        playbackRates: [0.5,1,1.5,2,3], // 倍速播放配置
                    })
                     self.myVideo.play()
                     self.myVideo.src(self.videoUrl)
                     self.myVideo.load(self.videoUrl)
                 })
            },
            //删除视频
            deleteVideo(){
                let self = this;
                self.$confirm('是否确定删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource?resourceType=1',{
                        name:'理论课学习视频'
                    }).then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.videoInit()
                            self.versionVideo =''
                            self.videoUrl = ''
                        // window.location.reload(); 刷新好使
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                })
            },
            //专科版本更改结束
            //下载文件
            downloadFile(){
                let self = this
                self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource/file-download/permission',{
                    remark :self.remark,
                    fileName : self.versionFile
                }) .then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.token = res.data
                        let downloadElement = document.createElement('a');
                        downloadElement.style.display = 'none';
                        downloadElement.href = '/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource/zip?token='+self.token
                        downloadElement.download = self.versionFile; //下载后文件名
                        downloadElement.click(); //点击下载
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //修改
            repeatFn(){
               // console.log(11211)
                this.show = true
                this.src = ''
            },
            //预览
            look(){
                this.show = false
                this.init()
            },
            //多文件上传
            getFileMore($event){
                let self = this
                let fileType = $event.target.files
                let nameFile1 = $event.target.files[0].name
                let nameFile2 = $event.target.files[1].name
                let fileType1 = nameFile1.substring((nameFile1.lastIndexOf('.') + 1), nameFile1.length) //取得后缀名
                let fileType2 = nameFile2.substring((nameFile2.lastIndexOf('.') + 1), nameFile2.length) //取得后缀名
                if(fileType1.toLowerCase() != "pptx" && fileType1.toLowerCase() != "pdf" || fileType2.toLowerCase() != "pptx" && fileType2.toLowerCase() != "pdf"  ){
                    this.$message.error('请上传pptx文件或者pdf文件')
                    return
                }
                 const loading = this.$loading({
                    lock: true,
                    text: '文件上传中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                 })
                let formData = new FormData();
                let files = $("#version-file-input-more");
                for (var i = 0; i < files[0].files.length; i++) {
                    formData.append("files", files[0].files[i]);
                    //console.log(files[0].files[i],78)
                }
                this.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource-file?name=学习课件&resourceType=2', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        loading.close()
                        $event.target.value=''
                        self.init()
                    }else if(res.code == '500'){
                        self.$message.error('上传失败，请检查文件中是否包含公式。若包含，请将公式转换为图片再上传')
                        loading.close()
                    }else{
                        loading.close()
                        $event.target.value = ''
                        self.$message.error(res.message)
                    }
                })
            },
            //文件上传
            getFile($event){
                let self = this
                self.src = ''
                let fileType = $event.target.files[0].name
                fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length) //取得后缀名
                if( fileType.toLowerCase() != "pptx" && fileType.toLowerCase() != "pdf"){
                    this.$message.error('请上传pdf或pptx文件')
                    return
                }
                 const loading = this.$loading({
                    lock: true,
                    text: '文件上传中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                 })
                let arr = [];
                let formData = new FormData();
                formData.append('files', $event.target.files[0]);
                self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource-file?name=学习课件&resourceType=2', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        loading.close()
                        $event.target.value = ''
                        self.init()
                        self.show=false
                        //window.location.reload(); 刷新好使
                    }else if(res.code == '500'){
                        self.$message.error('上传失败，请检查文件中是否包含公式。若包含，请将公式转换为图片再上传')
                        loading.close()
                    }else{
                        loading.close()
                        $event.target.value = ''
                        self.$message.error(res.message)
                    }
                 })
            },
             //删除
            deleteFn(){
                let self = this;
                self.$confirm('是否确定删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource?resourceType=2',{
                        name:'学习课件'
                    }).then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.init()
                            self.versionFile = ''
                            // window.location.reload(); 刷新好使
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                })
            }
        }
    }
</script>
<style scoped>

    .iconfontlist:hover .xiaz2{
        opacity: 0.7 !important;
    }
    .zhizuo2{
        color: #bebebe !important;
    }

</style>
<style scoped lang="scss">
    @import "./../../../styles/layout/color_variables";
    .jx-content{
        margin-top: 0px ;
        .fileUp{
            text-align: center;
            padding: 160px 0 160px;
            background: #f9f9f9;
            #version-file-input{
                position: absolute;
                left: 0;
                opacity: 0;
                height: 44px;
                top: 0px;
                width: 144px;
                cursor: pointer;
            }
            #version-file-input-more{
                position: absolute;
                left: 0;
                opacity: 0;
                height: 30px;
                top: 0px;
                width: 90px;
                cursor: pointer;

            }
            .down-up{
                margin:10px 0;

            }
            .tips{
                margin-top:20px;
                color: #bebebe;
                line-height: 20px;
            }
            .uploadBtn{
                    margin-right: 30px;
                    position: relative;
                    &:hover{
                        background: #4c9ffe;
                        border: 1px solid #4c9ffe;
                    }
                }
            .icon-shanchu{
                color: $blue;
                font-size: 20px;
                vertical-align: sub;
                cursor: pointer;
                margin-right: 2px;
                margin-left: 5px;
                &:hover{
                    color: #4d73c0;
                }
            }
        }
        .iframse{
            padding-top: 15px;
            clear: both;
        }
        .saveBtn{
            margin-top: 30px;
            margin-right: 20px;
            background: #656378;
            color: #fff;
            width: 70px;
            height: 33px;
            border-radius: 3px;
            line-height: 33px;
            cursor: pointer;
            &:hover{
                background: #777689;
            }
        }

        .repeatBtn{
            background: #656378;
            color: #fff;
            width: 70px;
            height: 33px;
            border-radius: 3px;
            line-height: 33px;
            margin-right: -10px;
            cursor: pointer;
            &:hover{
                background: #777689;
            }
        }
        .newadd{
            padding: 15px 0;
            color:#1277eb;
        }
    }
    //专科版本
    .uploadBtns{
        position: relative;
        margin-top: 35px;
        .uploadBtns-file{
            margin: 8px 0;
            color: #cacaca;
        }

    }
    #version-files{
        position: absolute;
        left: 0;
        opacity: 0;
        height: 130px;
        top: -35px;
        width: 220px;
        cursor: pointer;
    }
    .video{
        width: 1200px;
        margin: 10px auto;
    }
    .video-empty{
        border: 1px dashed #b0b0b0;
        width: 220px;
        height: 130px;
        line-height: 130px;
        text-align: center;
        cursor: pointer;
        position: relative;
        border-radius: 6px;
        margin-left: 30px;
        margin-bottom: 40px;
        &:hover{
             border: 1px dashed #868686;
        }
    }
    .video-img{
        cursor: pointer;
        position: relative;
        background: url('../../../assets/images/defalut.png') no-repeat;
        width: 220px;
        height: 130px;
        margin-bottom: 30px;
        margin-left: 30px;
    }
    .video-img-load{
        cursor: pointer;
        position: relative;
        background: url('../../../assets/images/defalut.png') no-repeat;
        width: 220px;
        height: 130px;
        margin-left: 30px;
        color: #fff;
        text-align: center;
        padding-top: 45px;
        display: none
    }
    .video-img>img{
        width: 200px;
        height: 100px;
        line-height: 100px;

    }
    .iconpost{
        padding: 45px 20px 10px 20px;
        color: #fff;
    }
    .iconpost .filename{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 180px;
        text-align: center
    }
    .icon-tubiaozhizuo-{
        color: #385899;
        font-size: 20px;
        vertical-align: bottom;
        cursor: pointer;
        &:hover{
            color: #4d73c0;
        }
    }
    .icon-shangchuan-{
        margin-right: 3px;
        font-size: 15px;
    }
    .el-icon-search{
        margin-right: 3px;
    }
    .icon-icon_edit{
        font-size: 14px;
        margin-right: 3px;
    }
    .iconfontlist{
        text-align: center;
        margin-top: 12px;
        i{
            background: #fff;
            opacity: 0.7;
            border-radius: 50%;
            width: 19px;
            height: 19px;
            display: inline-block;
            padding: 4px;
            text-align: center;
            color: #000;
            margin-right: 3px;
            &:hover{
                opacity: 1;
            }

        }
        #versionFile{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 27px;
            height: 27px;
            opacity: 0;
        }
        .icon-shangchuan{
            position: relative;
        }
        .icon-Group-{
            font-weight: 600;
        }

    }
    #video{
        width: 100%;
    }
</style>
